import { Link, useNavigate } from "react-router-dom"
import React, { Suspense } from "react"
import Discover from "./pages/discover";
import Mine from "./pages/mine";
import Page404 from "./pages/page404";
import Playlist from "./pages/discover/playlist";
import Toplist from "./pages/discover/toplist";
import routes from "./router/routes";
import useRoutesWithGuard from "./router/useRoutesWithGuard";
const Base = () => {
    let Element = useRoutesWithGuard('qf-token', routes, 'localStorage')
    //编程式导航的hook
    let navigate: any = useNavigate()

    let handleClick = () => {
        navigate('/mine/777', { state: { name: "李雷" } })
    }
    return (

        <fieldset>
            <legend>路由基础组件</legend>

            <Link to="/discover">发现</Link>

            <br />
            <Link to="/mine">个人中心</Link>
            <br />
            <Link to="/friend">朋友</Link>

            <button onClick={handleClick}>一个朴实无华的按钮</button>

            {/* <Routes>
                <Route path="*" element={<Page404 />} />
                嵌套路由
                <Route path='/discover' element={<Discover />}>
                    <Route path="playlist" element={<Playlist />} />
                    <Route path="toplist" element={<Toplist />} />
                </Route>
                <Route path="/mine/:id" element={<Mine />} />
            </Routes> */}

            <Suspense>
                {
                    Element
                }
            </Suspense>
        </fieldset >

    )
}

export default Base;